<template>
  <div class="bigCalendar h100">
    <dividerTitle class="calendar-title-box" :title="componentTitle">
      <div class="calendar-head">
        <div class="task-legend">
          <span class="square-outline in-process"></span
          ><label style="margin-right: 16px">按期</label>
          <span class="square-outline wait-check"></span
          ><label style="margin-right: 16px">即将到期</label>
          <span class="square-outline finished"></span
          ><label>已超期的工单</label>
        </div>
        <div class="date-switch">
          <i class="el-icon-arrow-left btn-style" @click="prev"></i>
          <span class="date-range">{{ dateRangeInfo }}</span>
          <i class="el-icon-arrow-right btn-style" @click="next"></i>
          <div class="back-today">
            <el-button
              type="plain"
              size="small"
              class="tools-today"
              @click="toToday()"
              >返回今天</el-button
            >
          </div>
        </div>
        <div class="hide-task">
          <el-checkbox v-model="checked">隐藏已结束任务</el-checkbox>
          <div class="tools-switch">
            <el-radio-group v-model="switchDate" size="small">
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </dividerTitle>
    <div class="calendar-content" ref="calendarContentRef" id="calendarContent">
      <div
        class="work-plan-item"
        ref="calendarItemRef"
        v-for="(item, index) in workPlanList"
        :key="index"
        @click="openDetail(item)"
        :style="{
          width: item.width,
          backgroundColor: item.color,
          marginTop: item.top,
          marginLeft: item.left,
        }"
      >
        <el-tooltip placement="top" effect="light">
          <div slot="content" style="font-size: 14px">
            标题 : {{ item.title }}
            <br />
            状态 : {{ item.statusName }}
            <br />
            计划开始时间 : {{ item.startTime }}
            <br />
            计划结束时间 : {{ item.endTime }}
            <br />
            工作地点 : {{ item.locationName }}
            <br />
            工作负责人 : {{ item.leaderName }}
            <br />
            工作班成员 : {{ item.workerName }}
            <br />
            工作单位 : {{ item.workUnitName }}
            <br />
            工单类型 : {{ item.orderTypeName }}
            <br />
          </div>
          <div
            style="
              color: #666666;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              text-align: left;
              padding-left: 15px;
            "
          >
            <span class="content-type">{{ item.orderTypeName }}</span>
            <span style="color:#fff">{{ item.title }}</span>
          </div>
        </el-tooltip>
      </div>
      <table>
        <tr>
          <th
            :class="[{ active: item.value === leftActiveDay }]"
            v-for="(item, index) in thList"
            :key="index"
          >
            {{ item.label }}
          </th>
        </tr>
        <tr>
          <td
            :class="[{ active: item.value === leftActiveDay }]"
            v-for="(item, index) in thList"
            :key="index"
          ></td>
        </tr>
      </table>
    </div>
    <div class="up-down-div" v-if="isScroll">
      <span
        class="el-icon-arrow-up ups"
        :class="{ notClick: this.canUp == false, canClick: this.canUp == true }"
        title="向上翻页"
        @click="goUpDown('up')"
      ></span>
      <span
        class="el-icon-arrow-down"
        :class="{
          notClick: this.canDown == false,
          canClick: this.canDown == true,
        }"
        title="向下翻页"
        @click="goUpDown('down')"
      ></span>
    </div>
  </div>
</template>

<script>
import { dailyWorkData } from "@/api/workStation/workStation.js";
export default {
  props: ["componentTitle"],
  components: {},
  data() {
    return {
      allData: [],
      canUp: false,
      canDown: false,
      pageNumber: 0,
      isScroll: false,
      checked: true,
      currentSelect: true,
      thList: [],
      dateRangeInfo: "",
      switchDate: "周", // 周，月切换
      today: this.elementDate.getCurrentDate(), //今天
      leftActiveDay: this.elementDate.getCurrentDate(), // 左边日历选中的日期
      leftCurrMonth: this.elementDate.getCurrentMonth(), // 左边日历当前月份
      rightStartDay: this.elementDate.getCurrentDate(), // 右边日历开始日期
      rightCurrMonth: this.elementDate.getCurrentMonth(), // 右边日历当前月份
      workPlanList: [],
      searchFrom: {
        line: "",
      },
      trafficLights:{
        Normal:"#22bb5f",
        Warn:"#faa224",
        OverTime:"#ef4c4c"
      }
    };
  },
  created() {},
  mounted() {
    this.currentWeekMonday();
    this.buildDateList();
    this.buildThList();
    //this.isHide()
  },
  watch: {
    //监听周,月按钮点击
    switchDate() {
      this.buildThList();
      this.dualWorkPlanList();
    },
    //监听月，周的列数变化
    thList() {},
    //监听复选框的点击事件
    checked(val) {
      this.currentSelect = val;
      this.buildThList();
    },
    pageNumber(val) {
      let totalSize =
        this.allData.length % 16 == 0
          ? parseInt(this.allData.length / 16)
          : parseInt(this.allData.length / 16) + 1; //总页数
      if (val == 1) {
        this.canUp = false;
        this.canDown = true;
      }
      if (val == totalSize && totalSize > 1) {
        this.canUp = true;
        this.canDown = false;
      }
      if (val > 1 && val < totalSize) {
        this.canUp = true;
        this.canDown = true;
      }
    },
  },
  methods: {
    goUpDown(val) {
      /* let n = parseInt(this.workPlanList.length /18)
      let height = 0
      let anchorElement = document.getElementById('calendarContent');
      if(val =='up'){
        height = 37*18*(n-1)
      }if(val =='down'){
        height = 18*37*(n+1)
      }
      anchorElement.scroll({
        top: height, //向上移动的距离，如果有fixede布局， 直接减去对应距离即可
        behavior: 'smooth', // 平滑移动
      }); */
      let allData = this.allData; //全部数据
      let pageSize = 16; //每页18条数据
      let page =
        allData.length % pageSize == 0
          ? parseInt(allData.length / pageSize)
          : parseInt(allData.length / pageSize) + 1; //总页数
      if (val == "up") {
        if (this.pageNumber > 1 && this.pageNumber <= page) {
          this.pageNumber -= 1;
          this.workPlanList = allData.slice(
            (this.pageNumber - 1) * pageSize,
            this.pageNumber * pageSize
          );
          this.dualWorkPlanList();
        } else {
          return;
        }
      }
      if (val == "down") {
        if (this.pageNumber >= 1 && this.pageNumber < page) {
          this.pageNumber += 1;
          this.workPlanList = allData.slice(
            (this.pageNumber - 1) * pageSize,
            this.pageNumber * pageSize
          );
          this.dualWorkPlanList();
        } else {
          return;
        }
      }
    },
    isHide() {
      let calendarContentClient = this.$refs.calendarContentRef.clientHeight;
      let calendarContentScroll = this.$refs.calendarContentRef.scrollHeight;
      let calendarContentOffset = this.$refs.calendarContentRef.offsetHeight;
      if (
        calendarContentScroll > calendarContentClient ||
        calendarContentClient > calendarContentOffset
      ) {
        this.isScroll = true;
      } else {
        this.isScroll = false;
      }
    },
    jumpRouter(row) {},
    openDetail(item) {
      //点击右侧的块，跳转到指定的页面模块
      let router = "";
      let form = {};
      form.id = item.id;
      form.status = item.status;
      form.pageType = "details";
      switch (item.orderType) {
        case "repair":
          router = "/orderManagement/planRepair/details"; //计划检修
          break;
        case "patrol":
          router = "/orderManagement/patrolOrder/details"; //巡视
          break;
        case "overhaul":
          router = "/orderManagement/overhaul/details"; //大修
          break;
        case "defect":
          router = "/orderManagement/defectOrder/details"; //缺陷
          form.menuType = "mechatronics";
          form.pageType = "edit";
          break;
        case "maintain":
          router = "/orderManagement/normalMaintenance/details"; //日常维护单
          break;
        case "experiment":
          router = "/orderManagement/experimentOrder/details"; //试验
          break;
      }
      let { href } = this.$router.resolve({
        path: router,
        query: form,
      });
      this.$utils.setCurrentInfo();
      window.open(href, "_blank");
    },
    //获取指定日期范围内的工单内容
    getWorkPlanList() {
      let data = [];
      let param = {
        account: this.$store.getters.userInfo.account,
        monthFirst: this.startDate,
        monthEnd: this.endDate,
        orderTypeList: "defect,maintain,repair,overhaul,experiment",
      };
      dailyWorkData(param)
        .then((res) => {
          if (res.code == 200) {
            let datas = [];
            if (this.currentSelect == true) {
              if (res.data.allTask && res.data.allTask.length > 0) {
                datas = res.data.allTask.filter((item) => {
                  return item.status != "ARCHIVED";
                });
              }
            } else {
              datas = res.data.allTask || [];
            }
            if (datas && datas.length > 0) {
              datas.map((i, j) => {
                i.orderTypeName = this.$store.getters["fineDirtDataName"](
                  "order_type",
                  i.orderType
                );
                i.statusName = this.$store.getters["fineDirtDataName"](
                  "order_all_status",
                  i.status
                );
                i.startDate =
                  (i.startTime && i.startTime.split(" ")[0]) ||
                  this.elementDate.getCurrentDate();
                i.endDate =
                  (i.startTime && i.endTime.split(" ")[0]) ||
                  this.elementDate.getCurrentDate();
              });
              this.allData = datas;
              if (datas.length > 16) {
                this.isScroll = true;
                this.workPlanList = datas.slice(0, 16);
              } else {
                this.isScroll = false;
                this.workPlanList = datas;
              }
              //this.workPlanList = datas
              this.pageNumber = 1;
              this.dualWorkPlanList();
            } else {
              this.workPlanList = [];
              this.dualWorkPlanList();
            }
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //处理时间跨度以及与顶部的距离
    dualWorkPlanList() {
      this.workPlanList.forEach((item, index) => {
        // 背景色
        //橙色#FFF1DE;
        //灰色#EFEFEF;
        //蓝色 #E1EFFC;
        item.color = this.trafficLights[item.trafficLight];
        let leftIndex = this.thList.findIndex((th) => {
          return (
            (th.value === item.startTime && item.startTime.split(" ")[0]) ||
            this.elementDate.getCurrentDate()
          ); //item.startTime.split(' ')[0]
        });
        let leftSpan = 0;
        if (leftIndex > 0) {
          leftSpan = leftIndex;
        } else {
          leftSpan = 0;
        }
        // 左边距
        item.left = `calc(100% / ${this.thList.length} * ${leftSpan})`;
        item.top = 37 * (index + 1) + "px"; //this.getTop1(item,index)  //37*(index + 1) +'px'  //
        //开始结束时间之间的跨度
        /* let days = this.getDaysBetween(item.startDate,item.endDate) + 1
        if (days > this.thList.length) {
          days = this.thList.length + 1
        }
        item.width = `calc(100% / ${this.thList.length} *${days})` */
        let startDateHs =
          new Date(item.startDate).getTime() / (1 * 24 * 60 * 60 * 1000);
        let endDateHs =
          new Date(item.endDate).getTime() / (1 * 24 * 60 * 60 * 1000);
        let startThHs =
          new Date(this.thList[0].value).getTime() / (1 * 24 * 60 * 60 * 1000);
        let endThHs =
          new Date(this.thList[this.thList.length - 1].value).getTime() /
          (1 * 24 * 60 * 60 * 1000);
        //宽度为0 的情况
        let dayDiff = 0;
        if (startThHs > endDateHs || startDateHs > endThHs) {
          dayDiff = 0;
        }
        //宽度为100%的情况 开始结束均在范围外
        if (startThHs > startDateHs && endDateHs > endThHs) {
          dayDiff = this.thList.length;
        }
        //开始、结束时间均在范围内
        if (startDateHs >= startThHs && endThHs >= endDateHs) {
          dayDiff = this.getDaysBetween(item.startDate, item.endDate);
        }
        //开始,th0,结束
        if (
          startThHs > startDateHs &&
          startThHs <= endDateHs &&
          endDateHs <= endThHs
        ) {
          dayDiff = this.getDaysBetween(this.thList[0].value, item.endDate);
        }
        //结束,th2,开始
        if (
          startThHs <= startDateHs &&
          startDateHs <= endThHs &&
          endDateHs > endThHs
        ) {
          dayDiff = this.getDaysBetween(
            item.startDate,
            this.thList[this.thList.length - 1].value
          );
        }
        item.width = `calc(100% / ${this.thList.length} *${dayDiff})`;
      });
      /* this.$nextTick(() =>{
        this.isHide()
      }) */
    },
    //计算当当前日期在上一个视图中占去了多少列
    //计算距离顶部的距离
    getTop1(item, index) {
      let count = 1;
      let start1 =
        (item.startTime && item.startTime.split(" ")[0]) ||
        this.elementDate.getCurrentDate(); //item.startTime.split(' ')[0]
      let end1 =
        (item.endTime && item.endTime.split(" ")[0]) ||
        this.elementDate.getCurrentDate();
      if (index === 0) {
        item.rowIndex = count;
        return 37 * count + "px";
      }
      let filterList = this.workPlanList.filter((item1) => {
        let start2 =
          (item1.startTime && item1.startTime.split(" ")[0]) ||
          this.elementDate.getCurrentDate(); //item1.startTime.split(' ')[0]
        let end2 =
          (item1.endTime && item1.endTime.split(" ")[0]) ||
          this.elementDate.getCurrentDate(); //item1.endTime.split(' ')[0]
        return (
          this.isDateIntersection(start1, end1, start2, end2) && item1.rowIndex
        );
      });
      if (!filterList.length) {
        item.rowIndex = count;
        return 37 * count + "px";
      } else {
        count = filterList[filterList.length - 1].rowIndex + 1;
        item.rowIndex = count;
        return 37 * count + "px";
      }
    },
    // 获取上边距
    getTop(item, index) {
      let count = 1;
      let maxIndex = 1;
      let start1 =
        (item.workBeginDate && item.workBeginDate.split(" ")[0]) ||
        this.elementDate.getCurrentDate();
      let end1 =
        (item.workEndDate && item.workEndDate.split(" ")[0]) ||
        this.elementDate.getCurrentDate();
      this.workPlanList.forEach((item1, index1) => {
        if (index1 < index) {
          let start2 =
            (item1.workBeginDate && item1.workBeginDate.split(" ")[0]) ||
            this.elementDate.getCurrentDate();
          let end2 =
            (item1.workEndDate && item1.workEndDate.split(" ")[0]) ||
            this.elementDate.getCurrentDate();
          if (maxIndex < item1.rowIndex) {
            maxIndex = item1.rowIndex;
          }
          if (this.isDateIntersection(start1, end1, start2, end2)) {
            count = count + 1;
          }
        }
      });
      if (index != 0 && count > maxIndex + 1) {
        count = maxIndex + 1;
      }
      item.rowIndex = count;
      return 37 * count + "px";
    },
    // 判断两个日期区间是否重合
    isDateIntersection(start1, end1, start2, end2) {
      var startdate1 = new Date(start1.replace("-", "/").replace("-", "/"));
      var enddate1 = new Date(end1.replace("-", "/").replace("-", "/"));
      var startdate2 = new Date(start2.replace("-", "/").replace("-", "/"));
      var enddate2 = new Date(end2.replace("-", "/").replace("-", "/"));
      if (startdate1 >= startdate2 && startdate1 <= enddate2) {
        return true;
      }
      if (enddate1 >= startdate2 && enddate1 <= enddate2) {
        return true;
      }
      if (startdate1 <= startdate2 && enddate1 >= enddate2) {
        return true;
      }
      return false;
    },
    // 获取两个日期之间相差的天数
    getDaysBetween(s1, s2) {
      var startDate = new Date(s1);
      var endDate = new Date(s2);
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      return Math.abs(days) + 1;
    },
    //获取当前周周一对应的日期
    currentWeekMonday() {
      let today = new Date();
      var currentDay = today.getDay() - 1;
      let mondayDate = this.elementDate.getNextDate(this.today, -currentDay);
      this.rightStartDay = mondayDate;
      return mondayDate;
    },
    //返回今日按钮点击
    toToday() {
      this.leftActiveDay = this.today;
      this.rightStartDay = this.currentWeekMonday();
      this.leftCurrMonth = this.elementDate.getCurrentMonth();
      this.rightCurrMonth = this.leftCurrMonth;
      this.buildThList();
      this.buildDateList();
    },
    //加减月份
    addMonth(n) {
      this.leftCurrMonth = this.elementDate.addMonth(this.leftCurrMonth, n);
      this.buildDateList();
    },
    calendarClick(row) {
      this.leftActiveDay = row.value;
      this.rightStartDay = row.value;
      this.rightCurrMonth =
        this.rightStartDay.split("-")[0] +
        "-" +
        this.rightStartDay.split("-")[1];
      this.buildThList();
    },
    //左箭头 上一个
    prev() {
      if (this.switchDate == "周") {
        this.rightStartDay = this.elementDate.getNextDate(
          this.rightStartDay,
          -7
        );
        this.rightCurrMonth =
          this.rightStartDay.split("-")[0] +
          "-" +
          this.rightStartDay.split("-")[1];
      } else {
        this.rightCurrMonth = this.elementDate.addMonth(
          this.rightCurrMonth,
          -1
        );
        this.rightStartDay = this.rightCurrMonth + "-01";
      }
      this.buildThList();
    },
    //右箭头 下一个
    next() {
      if (this.switchDate == "周") {
        this.rightStartDay = this.elementDate.getNextDate(
          this.rightStartDay,
          7
        );
        this.rightCurrMonth =
          this.rightStartDay.split("-")[0] +
          "-" +
          this.rightStartDay.split("-")[1];
      } else {
        this.rightCurrMonth = this.elementDate.addMonth(this.rightCurrMonth, 1);
        this.rightStartDay = this.rightCurrMonth + "-01";
      }
      this.buildThList();
    },
    //获取日历内容（周，月）
    buildThList() {
      let tempList = [];
      if (this.switchDate == "周") {
        let endDate = this.elementDate.getNextDate(this.rightStartDay, 6);
        this.dateRangeInfo =
          parseInt(this.rightStartDay.split("-")[1]) +
          "月" +
          parseInt(this.rightStartDay.split("-")[2]) +
          "日-" +
          parseInt(endDate.split("-")[1]) +
          "月" +
          parseInt(endDate.split("-")[2]) +
          "日";
        for (let i = 0; i <= 6; i++) {
          let day = this.elementDate.getNextDate(this.rightStartDay, i);
          let week = this.elementDate.getWeek(day);
          let str = day.split("-")[1] + "-" + day.split("-")[2] + " " + week;
          tempList.push({
            label: str,
            value: day,
          });
        }
      } else {
        this.dateRangeInfo =
          this.rightCurrMonth.split("-")[0] +
          "年" +
          this.rightCurrMonth.split("-")[1] +
          "月";
        let monthDays = this.elementDate.getMonthDays(this.rightCurrMonth); // 获取本月天数
        for (let i = 1; i <= monthDays; i++) {
          tempList.push({
            label: i < 10 ? "0" + i : i,
            value: this.rightCurrMonth + "-" + (i < 10 ? "0" + i : i),
          });
        }
      }
      this.thList = tempList;
      this.startDate = tempList[0].value;
      this.endDate = tempList[tempList.length - 1].value;
      this.getWorkPlanList();
    },
    buildDateList() {
      this.dateList = [];
      let monthDays = this.elementDate.getMonthDays(this.leftCurrMonth); // 获取本月天数
      let firstDayWeek = this.elementDate.getMonthFirstDayWeek(
        this.leftCurrMonth
      ); //第一天星期几
      let lastDayWeek = this.elementDate.getMonthLastDayWeek(
        this.leftCurrMonth
      ); //最后一天星期几
      if (firstDayWeek != 1) {
        for (let i = firstDayWeek || 7; i > 1; i--) {
          let date = this.elementDate.getNextDate(
            this.leftCurrMonth + "-01",
            1 - i
          );
          this.dateList.push({
            label: parseInt(date.split("-")[2]),
            value: date,
            gary: true,
          });
        }
      }
      for (let i = 1; i <= monthDays; i++) {
        this.dateList.push({
          label: i,
          value: this.leftCurrMonth + "-" + (i < 10 ? "0" + i : i),
          gary: false,
        });
      }
      if (lastDayWeek != 0) {
        for (let i = 0; i <= 6 - lastDayWeek; i++) {
          let date = this.elementDate.getNextDate(
            this.leftCurrMonth + "-" + monthDays,
            i + 1
          );
          this.dateList.push({
            label: parseInt(date.split("-")[2]),
            value: date,
            gary: true,
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266 !important;
}
/deep/.el-radio-button__orig-radio + .el-radio-button__inner {
  font-size: 14px;
  border-color: #bababa;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #0d60b4;
  //border-color: #DCDFE6;
  border-color: #0d60b4;
  background-color: #e1effc;
  box-shadow: -1px 0 0 0 #0d60b4;
}
.bigCalendar {
  height: 100%;
  width: 100%;
  .workTittle {
    color: #999999;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    padding-left: 5px;
    /deep/.el-divider--vertical {
      margin-left: 12px;
    }
  }
  .calendar-head {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 82%;
    justify-content: space-between;
    .btn-style {
      display: inline-block;
      border: 1px solid #999999;
      border-radius: 4px;
      padding: 4px;
    }
    .btn-style:hover {
      cursor: pointer;
      background: #e1effc;
      border: 1px solid #0d60b4;
      border-radius: 4px;
    }
    .task-legend {
      width: 33%;
    }
    .square-outline {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 4px;
      margin-right: 9px;
    }
    .in-process {
      background: @kr-main-green-color;
    }
    .wait-check {
      background: @kr-main-yellow-color;
    }
    .finished {
      background: @kr-red-warn-color;
    }
    .date-range {
      padding: 0 16px;
    }
    .date-switch {
      position: absolute;
      left: 60%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 35%;
    }
    .back-today {
      display: inline;
      margin-left: 20px;
    }
    .tools-switch {
      display: inline;
      margin-left: 31px;
    }
  }
  .calendar-content {
    position: relative;
    height: calc(100% - 85px);
    width: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: hidden; //auto;
    margin: 0 20px;
    .work-plan-item {
      position: absolute;
      height: 32px;
      line-height: 32px;
      width: calc(100% / 7);
      background-color: #10c8e6;
      margin-top: 37px;
      cursor: pointer;
    }
    table {
      width: 100%;
      height: 100%;
      //overflow: auto;
      text-align: center;
      border-collapse: separate;
      border-spacing: 0;
      border: 1px solid #dddddd;
      border-radius: 8px;
      overflow: hidden;

      th {
        height: 32px;
        background-color: #f4f4f4 !important;
        border: 1px solid #efefef;
      }
      .active {
        color: #0871db;
        background-color: #f8f8f8;
      }
      td {
        border-right: 1px solid #efefef;
        border-top: 1px solid #efefef;
        background-color: #ffffff;
      }
      td:last-child {
        border-right: none;
      }
    }
  }
  .content-type {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    border-radius: 4px;
    border: 1px solid #fff;  
    color: #fff;
  }
}
.up-down-div {
  height: 64px;
  width: 64px;
  position: relative;
  left: calc(100% - 90px);
  bottom: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 7px 13px 0px rgba(204, 204, 204, 0.3);
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  .ups {
    margin: 8px;
  }
  span {
    vertical-align: middle;
    text-align: center;
    color: #cccccc;
    font-size: 16px;
    cursor: pointer;
    &:hover {
      color: #0d60b4;
      font-weight: 500;
    }
  }
  .notClick {
    //pointer-events: none;
    cursor: no-drop;
    color: #cccccc;
    font-weight: 400;
  }
  .canClick {
    color: #0d60b4;
    font-weight: 500;
  }
}
.hide-task /deep/ .el-checkbox__inner {
  border: 1px solid #606266;
}
.hide-task /deep/ .el-checkbox__inner:hover {
  border: 1px solid #606266;
}
.calendar-title-box {
  position: relative;
}
@media screen and (max-width: 1440px) {
  .date-switch {
    .back-today {
      display: block !important;
    }
  }
}
</style>
